import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import {View, StyleSheet, Dimensions} from 'react-native';

// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const {width, height} = Dimensions.get('window');

export default class SvgExample17 extends React.Component {


  render() {
    return (
      <View style={{...StyleSheet.absoluteFill, alignItems: 'center', justifyContent: 'center'}}>
        <Svg width="100%" height="100%" viewBox="0 0 800 300">
          <Defs>
            <LinearGradient
              id="Gradient"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="800"
              y2="0"
            >
              <Stop offset="0" stopColor="white" stopOpacity="0"/>
              <Stop offset="1" stopColor="white" stopOpacity="1"/>
            </LinearGradient>
            <Mask
              id="Mask"
              maskUnits="userSpaceOnUse"
              maskContentUnits="objectBoundingBox"
              x="0"
              y="0"
              width="800"
              height="300"
            >
              <Rect
                x="0"
                y="0"
                width="800"
                height="300"
                fill="url(#Gradient)"
              />
            </Mask>
            <Text
              id="Text"
              x="400"
              y="200"
              fontFamily="Verdana"
              fontSize="100"
              textAnchor="middle"
            >
              Masked text
            </Text>
          </Defs>
          <Rect x="0" y="0" width="800" height="300" fill="#FF8080"/>
          <Use
            href="#Text" //重用 id="Text"，
            fill="blue"  //填充颜色
            mask="url(#Mask)" //使用 Mask 指定Mask内的Rect作为当前 Text的背景
          />
          <Use href="#Text" fill="none" stroke="red" stroke-width="2"/>
        </Svg>
      </View>
    );
  }
}